<template>
  <div class="swiper-container" id="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in imgs">
        <img class="img" :src="'https://gw.alicdn.com/tfs/' + item.smallPicUrl"/>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
  import Swiper from "swiper"
  import "swiper/css/swiper.min.css";

  export default {
    name: 'swiper',
    data() {
      return {}
    },
    props: {
      imgs: {
        type: Array,
        default: () => []
      }
    },
    watch: {
      imgs() {
        this.$nextTick(() => {//将数据请求回来之后，重新渲染dom之后开始轮播
          new Swiper('.swiper-container', {
            loop: true,
            pagination: {
              el: ".swiper-pagination"
            },
            autoplay:{//图片自动轮播的同时，用户手动互动图片之后，轮播不会停止
              disableOnInteraction:false
            }
          })
        })
      }
    }
  }
</script>

<style>
  img {
    width: 100%;
    height: auto;
  }

  #swiper .swiper-pagination-bullet {
    background: #e5e8e8;
    opacity: 1;
  }

  #swiper .swiper-pagination-bullet-active {
    background: #ff5733;
  }
</style>
